Calm, warm and clear. Built for one-handed use on a phone.
Primary teal buttons are rare and obvious. Everything else is secondary or a text link.
Amber means “worth a look”. Soft red only for money actually below zero or over plan.
“You have £312 left this month”, not “Remaining budget”. Celebrate small wins.
Every tap target is at least 44px. Body text is 16px or more. No horizontal scrolling.
CSS custom properties, switched by html[data-theme]. Toggle the theme above to see dark values.
Figtree, with tabular figures so amounts line up. Body never below 16px; 13–14px only for labels and meta.
A 4px base. Cards use 20px padding and 20px radius; hero cards 24px.
Primary 52px · Secondary 48px · Tonal, text and icon 44px · Floating quick-add 60px. One primary per screen or sheet.
Labels always visible. Errors are amber, written as a helpful next step, and never block the rest of the form.
Budget bars move from green to amber at 80%, and to soft red only once over plan.
Forms open in a bottom sheet on phones and a centred dialog on wide screens. Every delete and edit offers Undo.
Give it a target and a date, and Steady shows what to put aside each month.
Create a goal24px grid, 1.8px rounded stroke, inherit text colour. Use with <s-icon name="…">.